<script setup name="$loading" lang="ts">
/**
// 插件使用方法
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
// 调用
proxy.$loading()
// 取消loading
proxy.$loading(false)
*/

type LoadingType = (status: boolean) => boolean

const isShow = ref<boolean>(true)
const $loading: LoadingType = (status = true) => {
	return isShow.value = status
}

defineExpose({
	$loading
})
</script>

<template>
	<div class="loading-bar" v-if="isShow">
		<i class="iconfont icon-loading"></i>
	</div>
</template>

<style lang="scss" scoped>
.loading-bar {
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 999;
	margin-left: -.5rem;
	margin-top: -.5rem;
	width: 1rem;
	height: 1rem;
	.icon-loading {
		font-size: .4rem;
	}
}
</style>